<template>
    <el-form :model="empForm" :inline="true" style="margin-bottom: 10px;">
        <el-form-item label="姓名">
            <el-input v-model="empForm.name" style="width: 120px;" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item label="账号">
            <el-input v-model="empForm.account" style="width: 120px;" placeholder="请输入员工账号"></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="empForm.gender" style="width: 100px;" placeholder="请选择">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="请假时间">
            <el-date-picker v-model="empForm.data" clearable value-format="YYYY-MM-DD" type="daterange"
                placeholder="选择日期" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                style="width: 350px; margin-left: 10px"></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getEmpLeaveMessage">查询</el-button>
            <el-button type="info" @click="clearEmpForm">清空</el-button>
        </el-form-item>
    </el-form>
    <div style="justify-content: space-between;margin-bottom: 10px;">
        <el-button type="primary" @click="passEmpApproveStatus(null)">批量通过</el-button>
        <el-button type="danger" @click="notPassEmpApproveStatus(null)">批量不通过</el-button>
    </div>
    <el-table :data="tableData" border style="width: 90%" @selection-change="getEmpLeaveMessageById">
        <el-table-column type="selection" width="40" />
        <el-table-column type="index" label="id" width="50" />
        <el-table-column property="name" label="员工姓名" width="90" />
        <el-table-column property="gender" label="员工性别" width="90" >
            <template #default="scope">
                <span v-if="scope.row.gender === 1">男</span>
                <span v-else-if="scope.row.gender === 2">女</span>
            </template>    
        </el-table-column>
        <el-table-column property="account" label="员工账号" width="90" />
        <el-table-column property="leaveReason" label="请假原因" width="120" />
        <el-table-column property="leaveType" label="请假类型" width="120" />
        <el-table-column property="leaveDate" label="请假时间" width="120" />
        <el-table-column property="leaveDays" label="请假天数" width="120" />
        <el-table-column property="approveStatus" label="审批状态" width="120">
            <template #default="scope">
                <span v-if="scope.row.approveStatus === 0">审批中</span>
                <span v-else-if="scope.row.approveStatus === 1">通过</span>
                <span v-else-if="scope.row.approveStatus === 2">不通过</span>
            </template>
        </el-table-column>
        <!-- 0-》审批中 1=》通过 2=》不通过 -->
        <el-table-column label="审批操作">
            <template #default="scope">
                <el-link style="margin-right: 10px;" target="_blank"
                    @click="passEmpApproveStatus(scope.row.id)">通过</el-link>
                <el-link type="danger" @click="notPassEmpApproveStatus(scope.row.id)">不通过</el-link>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 10px;">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import type { ComponentSize, FormInstance } from 'element-plus'
import axios from '@/utils/request'
const size = ref<ComponentSize>('default')
const currentPage = ref(1)
const pageSize = ref(10)
const disabled = ref(false)
const tableData = ref([])
const background = ref(true)
const total = ref(0)
//定义一个数组存放选中的表格数据
const empLeaveMessage = ref([])
const empLeaveMessageId = ref([])
//获取选中表格数据
const getEmpLeaveMessageById = (val: any) => {
    //获取数据放到表格中
    empLeaveMessage.value = val
    //存放的表格清空
    empLeaveMessageId.value = []
}
let empForm = ref({
    name: '',
    gender: '',
    account: '',
    data: ['', '']
})
const clearEmpForm = () => {
    empForm.value.name = '';
    empForm.value.gender = '';
    empForm.value.account = '';
    empForm.value.data = ['', ''];
    // 每次清空都要发送请求根据页数获取数据
    getEmpLeaveMessage()
}
//钩子
onMounted(() => {
    getEmpLeaveMessage()
})
//当前页展示大小发生改变
const handleSizeChange = (val: number) => {
    pageSize.value = val
    //每次改变都要发送请求根据页数获取数据
    getEmpLeaveMessage()
}
//当前页数发生改变
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    //每次改变都要发送请求根据页数获取数据
    getEmpLeaveMessage()
}
// 获得所有的请假信息
const getEmpLeaveMessage = async () => {
    try {
        // 使用axios发送GET请求，获取请假信息
        // 请求的URL包含了分页参数（page和pageSize）以及根据员工表单（empForm）中的筛选条件构建的查询参数
        const result = await axios.get(`/admin/leaves?page=${currentPage.value}&pageSize=${pageSize.value}&name=${empForm.value.name}
        &gender=${empForm.value.gender}&account=${empForm.value.account}&startDate=${empForm.value.data[0]}&endDate=${empForm.value.data[1]}`);
        // 检查后端返回的数据中的code字段是否为1，表示请求成功
        if (result.data.code === 1) {
            // 如果成功，将返回的请假信息数据（result.data.data.rows）赋值给tableData，用于在前端展示
            tableData.value = result.data.data.rows;
            // 同时更新总记录数（total），用于分页组件等相关功能
            total.value = result.data.data.total;
            //查询成功提示
            if (empForm.value.name != '' || empForm.value.gender != '' || empForm.value.account != '' || empForm.value.data[0] != '' || empForm.value.data[1] != '') {
                ElMessage.success('查询成功');
            }
        } else {
            // 如果code不为1，表示请求失败，显示错误消息（这里可以根据后端返回的错误信息进一步优化错误提示内容）
            ElMessage.error('获取请假信息失败');
        }
    } catch (error) {
        // 如果在发送请求过程中出现错误（如网络问题、后端接口异常等），捕获错误并记录错误信息
        console.error('获取请假信息时发生错误:', error);
        // 向用户显示一个通用的错误消息，提示用户检查网络或联系后台管理员
        ElMessage.error('获取请假信息时发生错误，请检查网络或联系后台管理员');
    }
}
//管理员对于员工请假审批为通过
const passEmpApproveStatus = async (id: number) => {
    //误触判断
    const isConfirmed = window.confirm('确认该操作吗?')
    if (!isConfirmed) {
        return
    }
    //判断是单个通过还是多个通过 或者 单个不通过还是多个不通过
    if (empLeaveMessage.value.length > 0 && empLeaveMessageId.value.length === 0 && id === null) {
        //遍历表格数据
        for (let i = 0; i < empLeaveMessage.value.length; i++) {
            //将选中的表格数据的id放到数组中
            empLeaveMessageId.value.push(empLeaveMessage.value[i].id)
        }
    } else if (empLeaveMessage.value.length === 0 && id === null) {
        //如果没有选中表格数据 并且 id为null 则提示用户先选中表格数据
        ElMessage.error('请先选中表格数据')
        return
    } else {
        //id不为null 则将id放到数组中
        empLeaveMessageId.value = [id]
    }
    //发送put请求,发送的是数组
    try {
        const result = await axios.put('/admin/leaves', {
            ids: empLeaveMessageId.value.join(','),
            approveStatus: 1
        })
        if (result.data.code === 1) {
            ElMessage.success('操作成功')
            // 重新获取数据
            getEmpLeaveMessage()
        } else {
            ElMessage.error('操作失败')
        }
    }
    catch (error) {
        console.error('操作失败:', error)
        ElMessage.error('操作失败，请检查网络或联系后台管理员')
    }
}
//管理员对于员工请假审批为不通过
const notPassEmpApproveStatus = async (id: number) => {
    //误触判断
    const isConfirmed = window.confirm('确认该操作吗?')
    if (!isConfirmed) {
        return
    }
    //判断是单个通过还是多个通过 或者 单个不通过还是多个不通过
    if (empLeaveMessage.value.length > 0 && empLeaveMessageId.value.length === 0 && id === null) {
        //遍历表格数据
        for (let i = 0; i < empLeaveMessage.value.length; i++) {
            //将选中的表格数据的id放到数组中
            empLeaveMessageId.value.push(empLeaveMessage.value[i].id)
        }
    } else if (empLeaveMessage.value.length === 0 && id === null) {
        //如果没有选中表格数据 并且 id为null 则提示用户先选中表格数据
        ElMessage.error('请先选中表格数据')
        return
    } else {
        //id不为null 则将id放到数组中
        empLeaveMessageId.value = [id]
    }
    //发送put请求,发送的是数组
    try {
        const result = await axios.put('/admin/leaves', {
            ids: empLeaveMessageId.value.join(','),
            approveStatus: 2
        })
        if (result.data.code === 1) {
            ElMessage.success('操作成功')
            // 重新获取数据
            getEmpLeaveMessage()
        } else {
            ElMessage.error('操作失败')
        }
    }
    catch (error) {
        console.error('操作失败:', error)
        ElMessage.error('操作失败，请检查网络或联系后台管理员')
    }
}
</script>

<style>

</style>